<template>
    <div class="wrapper" >
      <v-head 
        :new-user-flay="newUserFlay" 
        @updateFlay="changeFlay" 
        class="wrapper-head" 
        :style="{'z-index': newUserFlay ? 'auto' : 1}">
      </v-head>
      
      <!-- 页面切换加动画 -->
      <!-- name="custom-classes-transition"
             enter-active-class="animated bounceInLeft"
             leave-active-class="animated bounceOutRight" -->
      <div class="dsp-home-main-tras">
          <transition 
             mode="out-in"        
          >
             <router-view class="views"></router-view>
          </transition>
      </div>
      
      <v-foot></v-foot>

      <a-back-top id="pro-back-top" :visibilityHeight="250"/>
        <!--客服图表-->
      <div class="feedback cursor-pointer" @click="visibleModel=true" v-if="false">
         {{ $t('pro.public.home.modalTitle') }} <a-icon type="message" />
      </div>

      <!-- 客服弹框 -->
      <a-modal
            :title="$t('pro.public.home.modalTitle') +'?'"
            :visible="visibleModel"
            @ok="handleOk"
            :confirmLoading="confirmLoading"
            @cancel="handleCancel"
        >
            <a-textarea :placeholder="$t('pro.public.home.modalPhlder')"
                :autosize="{ minRows: 4, maxRows: 6 }"
                v-model="userFeedback"
            />
        </a-modal>

        <div class="new-user-model" v-if="newUserFlay" @click="newUserFlay = false"></div>
    </div>
</template>

<script>
import vHead from "@/components/common/Header";
import vFoot from "@/components/common/Footer";
import { updateTheme } from "@/assets/JSfunction";
import { getCompanyStyle } from "@/api/company-style.js";
import time from '../config/time'
import { mapActions } from "vuex";
import crypto from '../crypto'
import {browserRedirect} from '../utils/tool'

export default {
  name: "Home",
  data() {
    return {
      visibleModel: false, //帮助
      confirmLoading: false,
      userFeedback: '',
      newUserFlay: null,
      t: null,
    };
  },
  components: {
    vHead,
    vFoot
  },
  computed: {
    pageStyle() {
      return this.$store.getters.companyInfo.setStyle;
    }
  },
  watch: {
    newUserFlay(val){
        let obDiv = this.$el.querySelector('.header-botom nav ul li.new-user-bidder .ant-menu-submenu-title');
        if (!val) {
            window.localStorage.NEWLOGIN = 'false';
            obDiv.style.background = 'none'
        }else {
            obDiv.style.background = '#fff'
        }
    },
  },
  methods: {
     ...mapActions(["GetUserByCompany"]),

      changeFlay(flay) {
         window.localStorage.NEWLOGIN = flay
         this.newUserFlay = flay
      },

      handleOk() {
          this.confirmLoading = true;
          setTimeout(() => {
              this.visibleModel = false;
              this.confirmLoading = false;
          }, 1000);
      },
      handleCancel() {
          this.userFeedback = "";
          this.visibleModel = false
      },

      adminGetUserInfo () {
          this.GetUserByCompany().then(res => {
              //10分钟刷新一次 600000
              let t = setInterval(() => {
                  //查询是否有token或是是否管理员 都true则开始一直更新
                  if(window.sessionStorage.getItem('Authorization') && this.$store.getters.usIsAdmin){
                      localStorage.removeItem('userByCompany');
                      this.GetUserByCompany();
                  }else {
                      clearInterval(t);
                  }
              }, 60000)
          });
      }
  },
  created() {
      if (this.$store.getters.usIsAdmin) {
          this.adminGetUserInfo()
      }
  },
  mounted() {
    setTimeout(() => {
      if (this.pageStyle == "dark") {
        updateTheme(this.pageStyle);
      }
    }, 1);
    const CACHE = localStorage.getItem("companyInfo");
    if (!CACHE) {
      // 获取用户自定义样式后,
      // `src\views\Home.vue`中出发Vuex的更改样式方法
      getCompanyStyle().then(response => {
          const result = response.data.data;
          //如果没有 默认使用Vuex里的临时主题
          this.$store.commit("changeCompanyInfo", result);
        })
    } else {
      this.$store.commit("changeCompanyInfo", JSON.parse(crypto.get(CACHE), 'companyInfo'));
    }
    this.newUserFlay = browserRedirect() === 'pc' && window.localStorage.NEWLOGIN === 'true';

    //定时更新主页样式
    this.t = setInterval(() => {
        this.$store.dispatch('GetCompanyStyle').then(resDate => {
            let res = resDate.data || {};
            document.querySelector('link[rel="icon"]').setAttribute('href', res.favicon || "");
            document.title = `${res.companyName}`
         });
    }, time.homeStyleTime)
  },
  destroyed() {
      clearInterval(this.t);
  }
};
</script>

<style lang="less">

.dsp-home-main-tras {
    overflow: hidden;
    background-color: #eff3f8;
}

.dsp-home-main-tras .v-enter,
.dsp-home-main-tras .v-leave-to {
    opacity: 0;
    //transform: translateX(90px)
}


.dsp-home-main-tras .v-enter-active,
.dsp-home-main-tras .v-leave-active {
    transition: all .2s ease;
}


.wrapper-head {
    box-shadow: 5px 1px 10px rgba(0,0,0,0.24);
}
.dsp-spin {
    box-shadow: 3px 10px 20px 0 rgba(0,0,0,0.24);
}
  @media screen and (max-width: 800px){
        .dsp-spin {
            overflow: auto;
            .ant-spin-container{
                width: 397px;
            }
        }
    }

  #pro-back-top {
    right: 20px!important;
    bottom: 20px;
  }
  .feedback {
      width: 120px;height: 36px;background-color: #1da57a;position: fixed;bottom: 140px;right:  -45px;text-align: center;line-height: 36px;color: #fff;transform: rotate(-90deg);font-weight: 400;z-index: 999;border-radius: 5px;
  }

  .conditions.grid {
      grid-gap: 20px;
      grid-template-columns: repeat(3, 1fr);
  }
  .conditions > div:nth-child(3) .grid-item-title {
      border-bottom: none;
  }

  @media screen and (max-width: 992px) {
      .conditions.grid {
      // grid-gap: 20px;
          grid-template-columns: repeat(2, 1fr);
      .grid-item:nth-child(1) {
          grid-row: 1;
          grid-column: 1;
      }
      .grid-item:nth-child(2) {
          grid-row: 2;
          grid-column: 1;
      }
      .grid-item:nth-child(3) {
          grid-row: 2;
          grid-column: 2;
      }
      .grid-item:nth-child(4) {
          grid-row: 3;
          grid-column: 1;
      }
  }
  }
  @media screen and (max-width: 768px) {
      .conditions.grid {
        // grid-gap: 20px;
            grid-template-columns: 1fr;
        .grid-item {
            grid-column: 1 !important;
        }
        .grid-item:nth-child(1) {
            grid-row: 1;
        }
        .grid-item:nth-child(2) {
            grid-row: 2;
        }
        .grid-item:nth-child(3) {
            grid-row: 3;
        }
        .grid-item:nth-child(4) {
            grid-row: 4;
        }
      }
  }

  .wrapper .new-user-model {
    position: absolute;width: 100%;height: 100%;background:rgba(0,0,0,0.52);z-index: 999;
  }

   .header-botom nav ul li.new-user-bidder .ant-menu-submenu-title{
      border-radius: 4px;
      position: relative;
      z-index: 999999;
      .new-user-tips {
        position: absolute;
        width: 250px;
        height: 80px;
        z-index: 999999999999999999999999999;
        left: 100%;
        bottom: -38px;
        color: #666;

        padding: 5px 5px;
        vertical-align:middle;
        img {
          margin-top: -50px;
        }
        div {
          margin-left: 4px;
          font-size: 1.5rem;
          margin-top: 10px;
          display: inline-block;
          padding: 0 5px;
          border-radius: 3px;
          background-color: #fff;
        }
      }
    }

    /*原生广告*/
   .native-box {
        width: 100%;
        height: 100%;
        border: 1px solid rgba(0, 0, 0, 0.25);
        padding: 5px;
        .box-title {
            width: 100%;
            text-align: center;
            font-weight: 800;
            font-size: 1.6rem;
            margin: 5px 0;
        }
        .box-content {
            display: block;
            overflow: hidden;
            .thumb {
                margin: 8px 0;
                float: left;
                text-align: left;
                max-width: 35%;
                margin-right: 15px;
                a img {
                    max-width: 100%;
                    display: block;
                }
            }
            .description {
                display: block;
                margin-left: 8px;
                box-sizing: border-box;
                word-break: break-word;
                width: auto;
                max-width: 100%;
            }
        }
        .sponsor {
            margin-top: 15px;
            text-align: left;
            font-size: 12px;
            color: #6A6A6A;
            font-style: italic;
            width: 260px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .display-block {
            display: block;
        }
    }

   /*公共样式属性*/

/*分页*/
.public-page-box {
    margin-top: 20px;
    text-align: right;
}
  .cursor-pointer {
      cursor: pointer;
  }


</style>
